<template>
  <div class="main" v-if="isShow">
    <a-form
      id="formLogin"
      class="user-layout-login"
      ref="formLogin"
      :form="form"
      @submit="handleSubmit"
    >
      <a-tabs
        :activeKey="customActiveKey"
        :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
        @change="handleTabClick"
      >
        <a-tab-pane key="tab1">
          <span slot="tab">
        <a-icon type="user"/>
        账号密码登录
      </span>
          <a-form-item>
            <a-input
              :size="size"
              type="text"
              autocomplete="false"
              placeholder="用户: admin"
              v-decorator="[
                'username',
                {rules: [
                { required: true, message: '请输入帐户名或邮箱地址' },
                { validator: handleUsernameOrEmail }], validateTrigger: 'change'}
              ]"
            >
              <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
            </a-input>
          </a-form-item>

          <a-form-item>
            <a-input
              :size="size"
              type="password"
              autocomplete="false"
              placeholder="密码: admin"
              v-decorator="[
                'password',
                {rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur'}
              ]"
            >
              <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
            </a-input>
          </a-form-item>


          <a-form-item>
            <a-row>
              <a-col :span="14">
                <a-input
                  :size="size"
                  type="text"
                  autocomplete="false"
                  placeholder="请输入图片验证码"
                  v-decorator="['imgCode',{rules: [{ required: true, message: '请输入图片验证码' }], validateTrigger: 'blur'}]"
                >
                </a-input>
              </a-col>
              <a-col class="line" :span="1">&nbsp;</a-col>
              <a-col :span="9">
                <div style="position:relative">
                  <img
                    :src="src"
                    @click="refreshCaptcha"
                    alt="加载验证码失败"
                    style="width:145px;cursor:pointer"
                  />
                </div>
              </a-col>
            </a-row>

          </a-form-item>


        </a-tab-pane>
        <a-tab-pane key="tab2">
          <span slot="tab">
           <a-icon type="mobile"/>
            手机号登录
          </span>
          <a-form-item>
            <a-input :size="size"
                     type="text"
                     placeholder="手机号"
                     autocomplete="false"
                     v-decorator="['phone', {rules: [{required: true, message: '请输入手机号'},{ validator: this.validatePhone }], validateTrigger: 'change'}]">
              <a-icon slot="prefix" type="mobile" :style="{ color: 'rgba(0,0,0,.25)' }"/>
            </a-input>
          </a-form-item>

          <a-row :gutter="16">
            <a-col class="gutter-row" :span="14">
              <a-form-item>
                <a-input :size="size" type="text"
                         placeholder="验证码"
                         autocomplete="false"
                         v-decorator="['smsCode', {rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur'}]">
                  <a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }"/>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col class="gutter-row" :span="10">
              <a-button
                class="getCaptcha"
                tabindex="-1"
                :disabled="state.smsSendBtn"
                @click.stop.prevent="getSmsCode"
                v-text="!state.smsSendBtn && '获取验证码' || (state.time+' s秒后重新发送')"
              ></a-button>
            </a-col>
          </a-row>
        </a-tab-pane>
      </a-tabs>

      <a-form-item>
        <a-checkbox v-decorator="['rememberMe']">自动登录</a-checkbox>
        <router-link
          :to="{ name: 'recover', params: { user: 'aaa'} }"
          class="forge-password"
          style="float: right;"
        >忘记密码
        </router-link>
      </a-form-item>

      <a-form-item style="margin-top:24px">
        <a-button
          size="large"
          type="primary"
          htmlType="submit"
          class="login-button"
          :loading="state.loginBtn"
          :disabled="state.loginBtn"
        >确定
        </a-button>
      </a-form-item>

      <div class="user-login-other">
        <span>其他登录方式</span>
        <a href="javascript:void(0)" @click="handleClick('qq')">
          <a-icon class="item-icon" type="qq"></a-icon>
        </a>
        <a href="javascript:void(0)" @click="handleClick('wechat')">
          <a-icon class="item-icon" type="wechat"></a-icon>
        </a>
        <a href="javascript:void(0)" @click="handleClick('weibo')">
          <a-icon class="item-icon" type="weibo-circle"></a-icon>
        </a>
        <a href="javascript:void(0)" @click="handleClick('github')">
          <a-icon class="item-icon" type="github"></a-icon>
        </a>
        <a href="javascript:void(0)" @click="handleClick('gitee')">
          <my-icon class="item-icon" type="icon-mayun1"></my-icon>
        </a>
        <router-link class="register" :to="{ name: 'register' }">注册账户</router-link>
      </div>
    </a-form>

    <two-step-captcha
      v-if="requiredTwoStepCaptcha"
      :visible="stepCaptchaVisible"
      @success="stepCaptchaSuccess"
      @cancel="stepCaptchaCancel"
    ></two-step-captcha>
  </div>
</template>

<script>
  import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha'
  import { mapActions } from 'vuex'
  import { timeFix } from '@/utils/util'
  import { Icon } from 'ant-design-vue'
  import { validatenull, openWindow } from '@/utils/util'
  import { repeatCheck } from '@/api/user'
  import { getSmsCode } from '@/api/login'

  const MyIcon = Icon.createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/font_1017695_2skdyxvpnrk.js' // 在 iconfont.cn 上生成
  })

  export default {
    components: {
      TwoStepCaptcha,
      MyIcon
    },
    data () {
      return {
        size: 'large',
        customActiveKey: 'tab1',
        loginBtn: false,
        loginType: 0,
        requiredTwoStepCaptcha: false,
        stepCaptchaVisible: false,
        form: this.$form.createForm(this),
        state: {
          time: 60,
          loginBtn: false,
          loginType: 0,
          smsSendBtn: false
        },
        loginForm: {
          username: 'admin',
          password: '123456',
          code: '',
          token: '',
          t: ''
        },
        src: '',
        socialForm: {},
        isShow: true
      }
    },
    created () {
      this.socialLogin()
      this.refreshCaptcha()
    },
    methods: {
      ...mapActions(['Login', 'LoginByUserPhone', 'Logout', 'LoginBySocial']),
      // handler
      handleUsernameOrEmail (rule, value, callback) {
        const { state } = this
        const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/
        if (regex.test(value)) {
          state.loginType = 0
        } else {
          state.loginType = 1
        }
        callback()
      },
      // 刷新验证码
      refreshCaptcha: function () {
        this.form.setFieldsValue({ 'imgCode': '' })
        this.loginForm.t = new Date().getTime()
        this.src = 'http://101.132.64.80:8002/code?t=' + this.loginForm.t
      },
      handleTabClick (key) {
        this.customActiveKey = key
        // this.form.resetFields()
      },
      handleSubmit (e) {
        e.preventDefault()
        const {
          form: { validateFields },
          state,
          customActiveKey,
          Login,
          LoginByUserPhone
        } = this
        state.loginBtn = true
        // 标签切换 所有参数在这里写
        const validateFieldsKey = customActiveKey === 'tab1' ? ['username', 'password', 'imgCode'] : ['phone', 'smsCode']
        validateFields(validateFieldsKey, { force: true }, (err, values) => {
          if (!err) {
            console.log('login form', values)
            const loginParams = { ...values }
            if (values.username) {
              // 用户名密码登录
              delete loginParams.username
              loginParams[!state.loginType ? 'email' : 'username'] = values.username
              loginParams.password = values.password
              loginParams.t = this.loginForm.t
              loginParams.code = values.imgCode

              Login(loginParams)
                .then((res) => this.loginSuccess(res))
                .catch(() => {
                  this.refreshCaptcha()
                  state.loginBtn = false
                })
                .finally(() => {
                  state.loginBtn = false
                })
            } else {
              // 手机号登录
              LoginByUserPhone(loginParams).then((res) => this.loginSuccess(res))
                .catch(() => {
                  this.refreshCaptcha()
                  state.loginBtn = false
                })
                .finally(() => {
                  state.loginBtn = false
                })
            }
          } else {
            setTimeout(() => {
              state.loginBtn = false
            }, 500)
          }
        })
      },
      // 社交登录
      socialLogin () {
        console.log('1')
        const {
          LoginBySocial
        } = this
        const params = this.$route.query
        if (validatenull(params.state) && validatenull(params.code)) return
        console.log(params.state)
        console.log(params.code)
        this.isShow = false
        this.socialForm.state = params.state
        this.socialForm.code = params.code
        LoginBySocial(this.socialForm)
          .then((res) => this.loginSuccess(res))
          .catch(() => {
            this.loginBtn = false
          })

      },
      // 获取短信验证码
      getSmsCode (e) {
        e.preventDefault()
        const { form: { validateFields }, state } = this
        validateFields(['phone'], { force: true }, (err, values) => {
          if (!err) {
            state.smsSendBtn = true
            const interval = window.setInterval(() => {
              if (state.time-- <= 0) {
                state.time = 60
                state.smsSendBtn = false
                window.clearInterval(interval)
              }
            }, 1000)

            const hide = this.$message.loading('验证码发送中..', 0)
            getSmsCode(values.phone).then(res => {
              if (res.code == 200) {
                setTimeout(hide)
                this.$notification['success']({
                  message: '提示',
                  description: '验证码发送成功',
                  duration: 5
                })
              } else {
                setTimeout(hide)
                this.$notification['error']({
                  message: '提示',
                  description: '验证码发送失败',
                  duration: 5
                })
              }
            }).catch(err => {
              setTimeout(hide, 1)
              clearInterval(interval)
              state.time = 60
              state.smsSendBtn = false
              this.requestFailed(err)
            })
          }
        })
      },
      stepCaptchaSuccess () {
        this.loginSuccess()
      },
      stepCaptchaCancel () {
        this.Logout().then(() => {
          this.loginBtn = false
          this.stepCaptchaVisible = false
        })
      },
      loginSuccess (res) {
        this.$router.push({ name: 'dashboard' }, () => {
          this.$notification.success({
            message: '欢迎',
            description: `${timeFix()}，欢迎回来`
          })
        })
      },
      requestFailed (err) {
        this.loginBtn = false
        this.refreshCaptcha()
        // this.$notification['error']({
        //   message: '错误',
        //   description: ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试',
        //   duration: 4
        // })
      },
      handleClick (thirdpart) {
        this.$notification['error']({
          message: '错误',
          description: '功能暂时尚未开发,敬请期待下一版',
          duration: 4
        })
      },
      validatePhone (rule, value, callback) {
        if (!value) {
          callback()
        } else {
          if (new RegExp(/^1[3|4|5|7|8][0-9]\d{8}$/).test(value)) {
            let params = {
              fieldVal: value,
              dataId: ''
            }
            repeatCheck(params).then((res) => {
              if (res.code == 200 && res.data) {
                callback()
              } else {
                callback('该手机号未注册')
              }
            })
          } else {
            callback('请输入正确格式的手机号码!')
          }
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .user-layout-login {
    label {
      font-size: 14px;
    }

    .getCaptcha {
      display: block;
      width: 100%;
      height: 40px;
    }

    .forge-password {
      font-size: 14px;
    }

    button.login-button {
      padding: 0 15px;
      font-size: 16px;
      height: 40px;
      width: 100%;
    }

    .user-login-other {
      text-align: left;
      margin-top: 24px;
      line-height: 22px;

      .item-icon {
        font-size: 18px;
        color: rgba(0, 0, 0, 0.2);
        margin-left: 16px;
        vertical-align: middle;
        cursor: pointer;
        transition: color 0.3s;

        &:hover {
          color: #1890ff;
        }
      }

      .register {
        float: right;
      }
    }
  }

</style>

